<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#areaA{
				margin: 30px;
			}
		</style>
		<title>Positioning Labels</title>
	</head>
	<body>

		<div id="areaA"></div>
	

		<script type="text/javascript" charset="utf-8">
		var form1 = [
			{ view:"text", value:'dummy@email.com', label:"Email"},
			{ view:"text", type:'password', value:'123pass', label:"Password"},
			{ margin:5, cols:[
				{ view:"button", value:"Login" , type:"form" },
				{ view:"button", value:"Cancel" }
			]}
		];

		var form2 = [
			{ view:"text", value:'dummy@email.com', 
				label:"Email", labelPosition:"top"},
			{ view:"text", type:'password', value:'123pass', 
				label:"Password", labelPosition:"top"},
			{ margin:5, cols:[
				{ view:"button", value:"Login" , type:"form" },
				{ view:"button", value:"Cancel" }
			]}
		];

		var form3 = [
			{ view:"text", value:'dummy@email.com',
				label:"Email", labelAlign:'right'},
			{ view:"text", type:'password', value:'123pass',
				label:"Password", labelAlign:'right'},
			{ margin:5, cols:[
				{ view:"button", value:"Login" , type:"form" },
				{ view:"button", value:"Cancel" }
			]}
		];

		var form4 = [
			{ view:"text", value:'dummy@email.com', 
				label:"Email", labelAlign:'right', labelPosition:"top"},
			{ view:"text", type:'password', value:'123pass', 
				label:"Password", labelAlign:'right', labelPosition:"top"},
			{ margin:5, cols:[
				{ view:"button", value:"Login" , type:"form" },
				{ view:"button", value:"Cancel" }
			]}
		];		


		webix.ui({
			container:"areaA",
			margin:30, cols:[
				{ margin:30, rows:[
					{ view:"form", scroll:false, width:300, elements: form1 },
					{ view:"form", scroll:false, width:300, elements: form3 }
				]},
				{ margin:30, rows:[
					{ view:"form", scroll:false, width:300, elements: form2 },
					{ view:"form", scroll:false, width:300, elements: form4 }
				]}
				
				
			]
		});
		</script>
	</body>
</html>